<template>
    <div class="user-list-header" :class="isListSticky?'sticky':''">
        <div class="header-content">
            <router-link :to="{path:`/user/${this.$route.params.id}/activities`}" class="nav-item" :class="[heighLight.activities?'active':'']">
                <div class="item-title">动态</div>
            </router-link>
            <router-link :to="{path:`/user/${this.$route.params.id}/posts`}" class="nav-item" :class="[heighLight.posts?'active':'']">
                <div class="item-title">文章</div>
            </router-link>
            <router-link :to="{path:`/user/${this.$route.params.id}/pins`}" class="nav-item" :class="[heighLight.pins?'active':'']">
                <div class="item-title">沸点</div>
            </router-link>
            <div class="nav-item" @click.stop="likeShow" :class="[heighLight.likepublic?'active':'']">
                <div class="item-title">赞</div>
                <div class="item-count">1</div>
                <i class="item-count iconfont icon-xiala"></i>
                <div class="more-panel" :style="{display:likeIsShow?'block':'none'}">
                    <router-link class="more-item" :class="[heighLight.likes?'active':'']" :to="{path:`/user/${this.$route.params.id}/likes`}">文章 <span>0</span></router-link>
                    <router-link class="more-item" :class="[heighLight.praise?'active':'']" :to="{path:`/user/${this.$route.params.id}/praise`}">沸点 <span>0</span></router-link>
                </div>
            </div>
            <div class="nav-item" @click.stop="moreShow" :class="[heighLight.morepublic?'active':'']">
                <div class="item-title">更多</div>
                <i class="item-count iconfont icon-xiala"></i>
                <div class="more-panel" :style="{display:moreIsShow?'block':'none'}">
                    <router-link class="more-item" :class="[heighLight.cposts?'active':''||heighLight.cpins?'active':'']" :to="{path:`/user/${this.$route.params.id}/cposts`}">收藏</router-link>
                    <router-link class="more-item" :class="[heighLight.following?'active':''||heighLight.followers?'active':'']" :to="{path:`/user/${this.$route.params.id}/following`}">关注</router-link>
                </div>
            </div>
            <button v-if="isLogin" class="btn" @click="goProfileOrFollow" :class="[isSelfPage?'setting-btn':'follow-btn',isFollow?'active':'']">{{isSelf}}</button>
            <button v-else @click="tologin" class="follow-btn btn"><span>关注</span></button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserListHeader",
        created(){
            this.initHeightLight()
            this.getUserData()
            this.eventBus.$on("callListHeaderUpdateFollowToTrue",()=>{
                console.log(7845648949)
                this.isFollow=true
            })
            this.eventBus.$on("callListHeaderUpdateFollowToFalse",()=>{
                console.log(7845648949)
                this.isFollow=false
            })
        },
        mounted(){
            document.onclick=this.closePanel
            window.addEventListener("scroll",this.userListScroll,true)
        },
        data(){
            return {
                // 点赞的面板初始不显示
                likeIsShow:false,
                // 更多的面板初始不显示
                moreIsShow:false,
                // 点击进入我的主页默认动态高亮
                heighLight:{
                    activities:false,
                    posts:false,
                    pins:false,
                    likes:false,
                    praise:false,
                    following:false,
                    followers:false,
                    cposts:false,
                    cpins:false,
                    likepublic:false,
                    morepublic:false
                },
                isListSticky:false,
                //是否是自己的页面
                isSelfPage:false,
                //是否关注过
                isFollow:false,
                //是否登陆过
                isLogin:false,
                userData:{}
            }
        },
        methods:{
            likeShow(){
                this.likeIsShow=!this.likeIsShow
                this.moreIsShow=false
            },
            moreShow(){
                this.moreIsShow=!this.moreIsShow
                this.likeIsShow=false
            },
            closePanel(){
                this.likeIsShow=false
                this.moreIsShow=false
            },
            //高亮
            initHeightLight(newPath){
                let arr = Object.keys(this.heighLight)
                for(let i=0;i<arr.length;i++){
                    this.heighLight[arr[i]]=false
                }
                let path
                if(newPath){
                    path = newPath.path.split("/")[newPath.path.split("/").length-1]
                }else{
                    path = this.$route.path.split("/")[this.$route.path.split("/").length-1]
                }
                // console.log(path);
                this.heighLight[path]=true
                if(this.heighLight.likes||this.heighLight.praise){
                    this.heighLight.likepublic=true
                }else{
                    this.heighLight.likepublic=false
                }
                if(this.heighLight.following||this.heighLight.cposts||this.heighLight.followers||this.heighLight.cpins){
                    this.heighLight.morepublic=true
                }else{
                    this.heighLight.morepublic=false
                }
            },
            userListScroll(){
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                scrollTop>246?this.isListSticky=true:this.isListSticky=false
            },
            async getFollow(){
                if(!this.isSelfPage){
                    let result = await this.axios.post("api/concernList",{user_id:this.$store.state.userID})
                    let userResult = result.data.data.my_concern.find(item=>item.be_concern_user_id==this.$route.params.id)
                    if(userResult){
                        this.isFollow=true
                    }else{
                        this.isFollow=false
                    }
                }
            },
            async getUserData(){
                // this.$router.go(0);
                let result
                let {id} = this.$route.params
                if(this.$store.state.token){//如果为登陆状态
                    // console.log(this.$store.state.token);
                    this.isLogin=true
                    if(this.$store.state.userID==id){//如果跳转用户的id和登陆的id相同 那就用token请求数据
                        // console.log(111);
                        this.isSelfPage=true
                        result = await this.axios.post("/api/userAllInfo",{token:this.$store.state.token})
                    }else{
                        this.isSelfPage=false
                        result = await this.axios.post(`/api/personInfo?user_id=${id}`)
                    }
                }else{//如果不是登陆状态
                    this.isLogin=false
                    result = await this.axios.post(`/api/personInfo?user_id=${id}`)
                }
                // let result = await this.axios.post("/api/personInfo?user_id=462")
                // console.log(result);
                this.userData = result.data.data
                this.getFollow()
                //让关注者和关注的用户刷新 do something ...
            },
            async goProfileOrFollow(){
                if(this.isSelfPage){
                    this.$router.push({path:"/profile"})
                }else{
                    this.getFollow()
                    let result
                    if(this.isFollow){
                        result = await this.axios.post("api/concernDel",{
                            token:this.$store.state.token,
                            be_concern_user_id:this.$route.params.id
                        })
                        this.isFollow=false
                        this.eventBus.$emit("callUserUpdateFollowToFalse")
                    }else{
                        result = await this.axios.post("api/concern",{
                            token:this.$store.state.token,
                            be_concern_user_id:this.$route.params.id
                        })
                        this.isFollow=true
                        this.eventBus.$emit("callUserUpdateFollowToTrue")
                    }
                    console.log(result);
                    this.getUserData()
                    this.eventBus.$emit("callFollowingUpdate")
                }
            },
            tologin(){
                alert("请登陆")
            }
        },
        computed:{
            joinTime(){
                return this.userData.create_time
                // return
            },
            isSelf(){
                if(this.isSelfPage){
                    return "编辑个人资料"
                }else{
                    if(this.isFollow){
                        return "已关注"
                    }else{
                        return "关注"
                    }
                }
            }
        },
        watch:{
            $route(newPath){
                this.initHeightLight(newPath)
                // console.log(newPath.path.split("/")[this.$route.path.split("/").length-1]);
                // console.log(oldPath.path.split("/")[this.$route.path.split("/").length-1]);
            },
            "$route.path":{
                handler(){
                    // console.log(this.$route);
                    // let {id} = this.$route.params
                    this.getUserData()
                },
                deep:true
                // this.getUserData()
            },
            "$store.state":{
                handler(val){
                    if(val.token){
                        this.isLogin=true
                    }else{
                        this.isLogin=false
                    }
                },
                deep:true
            }
        }
    }
</script>

<style scoped>
    .user-list-header.sticky{
        position: fixed;
        top:60px;
        left: 0;
        right: 0;
        border-radius: 0;
        transition: all .2s;
    }
    .user-list-header{
        position: relative;
        margin: 0;
        padding: 0;
        height: 50px;
        background-color: #fff;
        border-radius: 2.5px 2.5px 0 0;
        border-bottom: 1px solid #ebebeb;
        z-index: 100;
    }
    .user-list-header .header-content{
        display: flex;
        align-items: center;
        margin: 0 auto;
        height: 100%;
        max-width: 960px;
        white-space: nowrap;
    }
    .nav-item {
        position: relative;
        cursor: pointer;
    }
    .user-list-header .nav-item{
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 90px;
        height: 100%;
    }
    .user-list-header .nav-item.active{
        box-shadow: inset 0 -2px 0 #3780f7;
    }

    .user-list-header .nav-item.active .item-title,.user-list-header .nav-item.active .item-count{
        color: #3780f7
    }
    .user-list-header .nav-item .item-title{
        font-size: 16px;
        font-weight: 500;
        color: #31445b;
    }
    .user-list-header .nav-item .more-panel .more-item.active{
        color: #3780f7;
    }

    .nav-item .item-count{
        margin-left: 5px;
        font-size: 15px;
        color: #b2bac2;
        line-height: 1;
    }
    .item-block{
        width:10px;
        height:10px;
        background-color:red
    }
    .nav-item .more-panel{
        position: absolute;
        top: 100%;
        left: 50%;
        margin: 0 0 0 -45px;
        padding: 7px 0;
        width: 90px;
        background-color: #fff;
        border: 1px solid #f3f3f4;
        border-radius: 2px;
        z-index: 1;
    }
    .nav-item .more-panel::before{
        content:"";
        position:absolute;
        top: 0;
        left: 50%;
        margin: -7px 0 0 -7px;
        border: 7px solid transparent;
        border-top: none;
        border-bottom: 7px solid #f3f3f4;
    }
    .nav-item .more-panel::after{
        content:"";
        position:absolute;
        top: 0;
        left: 50%;
        margin: -6px 0 0 -6px;
        border: 6px solid transparent;
        border-top: none;
        border-bottom: 6px solid #fff;
    }
    .more-panel .more-item{
        display: block;
        padding: 7px 0;
        font-size: 15px;
        text-align: center;
        color: #000;
    }
    .more-panel .more-item:hover{
        background-color: #fcfcfc;
    }

    .header-content .btn{
        display:none;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        padding: 0;
        height: 34px;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        border: 1px solid;
        background-color: #fff;
        border-radius: 4px;
    }
    .header-content .follow-btn{
        width: 106px;
        color: #6cbd45;
    }
    .user-list-header.sticky .header-content .btn{
        display:block
    } 

    .user-list-header.sticky .header-content .setting-btn {
        width: 118px;
        color: #3780f7;
    }
    .user-list-header.sticky .header-content .follow-btn{
        width: 108px;
        color: #6cbd45;
    }
    .user-list-header.sticky .header-content .follow-btn.active{
        color: #fff;
        background-color: #6cbd45;
        border-color: #6cbd45;
    }
</style>